<template>
    <div>
<!--        <span>输入菜名查询：</span>-->
<!--        <el-input style="width: 240px;margin-left: 20px"  placeholder="请输入菜名" v-model="name"></el-input>-->
<!--        <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search " @click="search">搜索</el-button>-->

        <div style="display: flex;margin-left: 70px;margin-top: 10px;position: relative;" v-for="(item,index) in caipin">
            <el-avatar  :size="45" :src="item.picture" shape="square"></el-avatar>
            <div style="margin-left: 20px;margin-top: 10px"> {{item.name}}</div>
            <div style="margin-left: 20px;margin-top: 10px"> ￥{{item.count * item.price}}</div>

            <div style="position: absolute;left: 450px;margin-top: 10px">
                <el-button :disabled="item.count == 0" @click="jiancar(index)" type="primary" icon="el-icon-minus" circle size="mini"></el-button>
                {{item.count}}
                <el-button @click="addcar(index)" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "diancai",
    props:{
        caipin: Object
    },
    data(){
        return{
            name:''
        }
    },
    methods:{
        // search(){
        //     this.caipin = this.caipin.filter(item => item.name.includes(this.name));
        // },
        addcar(index){
            this.caipin[index].count ++
        },
        jiancar(index){
            this.caipin[index].count --
        },
    }

}
</script>

<style scoped>

</style>